<template>
	<view class="search-page">
		<view class="tool-bars">
			<u-search v-model="filter.route_name" shape="round" :searchIconSize="52" :height="70" @search="search()"></u-search>
			
			<template v-if="hotWords.length">
				<view class="hot-words-text flex">
					<u-text :size="36" text="热门搜索"></u-text>
				</view>
				
				<view class="hot-words flex">
					<view class="hot-word-item flex" v-for="(item,key) in hotWords" :key="key">
						<u-tag class="hot-word-item__tag" :text="item.title" type="info" shape="circle" @click="search(item)"></u-tag>
					</view>
				</view>
			</template>
		</view>
		
		<view class="content-padding white-bg">
			<ftx-routes :routesList="routesList"></ftx-routes>
		</view>
	</view>
</template>

<script>
	import { getHotSearch,routerList } from '@/api/api.js'
	export default {
		data() {
			return {
				hotWords: [],
				routesList: [],
				filter: {
					route_name: '',
					page: 1
				},
				loadStatus: 'loadmore'
			};
		},
		methods: {
			getRoutesList: function() {
				if ( this.loadStatus == 'nomore' ) {
					return console.log('nomore')
				}
				
				uni.showLoading({
					title: '加载中'
				})
				this.loadStatus = 'loading'
				routerList(uni.$lv.object.queryParams(this.filter)).then(res => {
					uni.hideLoading()
					let _result = res.data || []
					if ( !_result.length ) {
						return this.loadStatus = 'nomore'
					}
					this.routesList = uni.$lv.array.union(this.routesList , _result)
					this.loadStatus = 'loadmore'
				})
			},
			getHotWords: function() {
				getHotSearch().then(res => {
					this.hotWords = res.data
				})
			},
			search: function(hotword) {
				if ( hotword.title != undefined ) {
					this.filter.route_name = hotword.title
				}
				console.log('cnmms')

				this.loadStatus = 'loadmore'
				this.routesList = []
				this.getRoutesList()
			}
		},
		mounted() {
			this.getHotWords()
			this.getRoutesList()
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.loadStatus = 'loadmore'
			this.filter.page = 1
			this.routesList = []
			this.getRoutesList()
			uni.stopPullDownRefresh()
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.filter.page++
			this.getRoutesList()
		},
	}
</script>

<style lang="scss">
.search-page {
	.tool-bars {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		.hot-words-text {
			margin: 16rpx 0;
		}
		.hot-words {
			flex-wrap: wrap;
			.hot-word-item {
				margin: 0 10rpx 10rpx 0;
			}
		}
	}
}
</style>
